<template>
  <div class="test-container">
    <h3 id="myh3">STest.vue组件 --{{ books.length }}本图书</h3>
    <p>msg 的值是: {{ msg }}</p>
    <button @click="msg += `~`">修改 msg 的值</button>
  </div>
</template>

<script>
export default {
  props: ['info'],
  name: 'STest',
  data () {
    return {
      msg: 'hello vue.js',
      // 定义
      books: []
    }
  },
  methods: {
    show () {
      console.log('调用了 Test 组件的 show 方法')
    },
    /**
     * 使用Ajax请求图书列表的数据
     */
    initBookList () {
      const xhr = new XMLHttpRequest()
      xhr.addEventListener('load', () => {
        const res = JSON.parse(xhr.responseText)
        console.log(res)
        this.books = res.data
      })
      xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
      xhr.send()
    }
  },
  /**
   * 创建阶段的第一个生命周期函数
   * 组件的props/data/methods 尚未被创建, 都处于不可用状态
   */
  beforeCreate () {
    console.log('-------- beforeCreate --------')
    // console.log(this.info)  // error
    // console.log(this.msg)   // undefined
    // this.show()             // error
    console.log('-------- beforeCreate --------\n')
  },
  /**
   * create生命周期函数, 非常常用
   * 经常在它里面, 调用 methods 中的方法, 请求服务器的数据
   * 并且把请求的数据, 转存到 data 中, 供 template 模板渲染的时候使用
   */
  created () {
    console.log('-------- created --------')
    // console.log(this.info)  // 9
    // console.log(this.msg)   // hello vue.js
    // this.show()             // 调用了 Test 组件的 show 方法
    this.initBookList()
    const dom = document.querySelector('#myh3')
    console.log(dom)    // null
    console.log('-------- created --------\n')
  },
  /**
   *
   */
  beforeMount () {
    console.log('-------- beforeMount --------')
    const dom = document.querySelector('#myh3')
    console.log(dom)      // null
    console.log(this.$el) // undefined
    console.log('-------- beforeMount --------\n')
  },
  /**
   * 常用!
   * 已经把内存中的HTML结构, 成功的渲染到了浏览器中,
   * 如果要操作当前组件的DOM, 最早, 只能在 mounted 阶段执行
   */
  mounted () {
    console.log('-------- mounted --------')
    const dom = document.querySelector('#myh3')
    // <h3 data-v-4903d925="" id="myh3">STest.vue组件 --7本图书</h3>
    console.log(dom)
    // <div data-v-4903d925="" data-v-7ba5bd90="" class="test-container">
    //    <h3 data-v-4903d925="" id="myh3">STest.vue组件 --7本图书</h3>
    // </div>
    console.log(this.$el)
    console.log('-------- mounted --------\n')
  },
  /**
   * beforeUpdate   组件运行阶段
   * 组件的data数据发生了变化, 但是DOM上面文本内容没有发生变化
   */
  beforeUpdate () {
    console.log('-------- beforeUpdate --------')
    console.log(this.msg)       // hello vue.js~
    const dom = document.querySelector('p')

    console.log(dom.innerHTML)  // hello vue.js
    console.log('-------- beforeUpdate --------\n')
  },
  /**
   * updated    组件运行阶段
   * 组件上的数据和UI结构完成了同步变化
   * 当数据变化之后, 为了能够操作最新的DOM结果, 必须把代码写到update生命周期函数中
   */
  updated () {
    console.log('-------- updated --------')
    console.log(this.msg)       // hello vue.js~
    const dom = document.querySelector('p')
    console.log(dom.innerHTML)  // hello vue.js~
    console.log('-------- updated --------\n')
  },
  beforeDestroy () {
    console.log('-------- beforeDestroy --------')
    console.log(this.msg)
    console.log('-------- beforeDestroy --------\n')
  }
}
</script>

<style lang="less" scoped>

.test-container {
  background-color: pink;
  height: 200px;
}
</style>
